class Element{
    constructor(type, props, children = []){
        this.type = type
        this.props = props
        this.children = children
    }
}


function createElement(type, props, children){
    return new Element(type, props, children)
}

//将虚拟dom渲染成真实dom
function render(vdom){
    let el = document.createElement(vdom.type)
    for(let key in vdom.props){
        setAttr(el, key, vdom.props[key])
    }
    vdom.children.forEach(child => {
        child = child instanceof Element ? render(child) : document.createTextNode(child)
        el.appendChild(child)
    })
    return el
}
//设置属性
function setAttr(node, key, value){
    switch(key){
        case 'value':
            if(node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() === 'textarea'){
                node.value = value
            }else{
                node.setAttribute(key, value)
            }
            break
        case 'style':
            node.style.cssText = value
            break
        default:
            node.setAttribute(key, value)
    }
}
//将真实dom渲染到页面
function renderDom(el, target){
    target.appendChild(el)
}